//MonacoEditor
import * as React from 'react'
import  MonacoEditor from './editor/src/index'

//import MonacoEditor from 'react-monaco-editor';
export default class MEditor extends React.Component<any,any> {
    monacoEditorRef;
    state = {
        // 储存提示语
        calculateValue: '--please code here'
      }
  constructor(props) {
    super(props);
    this.monacoEditorRef = React.createRef()
    
  }

  componentWillReceiveProps(nextProps) {
    // 编辑框的值
    if (this.state.calculateValue !== nextProps.calculateValue) {
      this.setState({
        calculateValue: nextProps.calculateValue
      })
    }
  }

  onBlur = () => {
    const { calculateValue } = this.state
    this.props.value(calculateValue)
  }

  onChangeHandle = (value, e) => {
    this.setState({
      calculateValue: value
    })
  }

  options = {
    selectOnLineNumbers: true,
    renderSideBySide: false
  }



  render() {
    return (
      <>
        <div onBlur={this.onBlur}>
          <MonacoEditor
            ref={this.monacoEditorRef}
            width='900'
            height='200'
            language='ccml'
            theme='vs'
            value={this.state.calculateValue}
            options={this.options}
            onChange={this.onChangeHandle}
          />
        </div>
      </>
    )
  }
}

